<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">用户相关</el-breadcrumb-item>
                <el-breadcrumb-item>会员列表</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 会员列表 -->
            <div class="userlist">
              <div class="status_box">
                <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" value-format="timestamp" format="yyyy 年 MM 月 dd 日" @change="getTime()" clearable  :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                <div class="status">
                  <el-select v-model="value" placeholder="账号状态" @change="selectChanged()" class="selectBox">
                    <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <div class="input" @keyup.enter="findUser()">
                  <el-input v-model="input" placeholder="会员名/会员id/手机号" onfocus="this.placeholder=''" onblur="this.placeholder='会员名/会员id/手机号'" clearable></el-input>
                </div>
                <div class="search"><el-button @click="findUser()">搜索</el-button></div>
                <div class="search search1"><el-button @click="dialog1 = true">新增会员</el-button></div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="id" label="会员ID" width="100"></el-table-column>
                  <el-table-column label="会员名" width="150">
                    <template slot-scope="scope">
                      <span class="name" @click="getName(scope.row)" v-if="scope.row.isMember==1">
                        <span v-if="scope.row.wechatNickname">{{scope.row.wechatNickname}}<i class="el-icon-star-on"></i></span>
                        <span v-if="!scope.row.wechatNickname">{{scope.row.phoneNumber}}<i class="el-icon-star-on"></i></span>
                      </span>
                      <span v-else>
                        <span v-if="scope.row.wechatNickname">{{scope.row.wechatNickname}}</span>
                        <span v-if="!scope.row.wechatNickname">{{scope.row.phoneNumber}}</span>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="count" label="订单数" width="120"></el-table-column>
                  <el-table-column prop="buyCardNum" label="累计购卡" width="120"></el-table-column>
                  <el-table-column prop="total" label="累计消费" width="120"></el-table-column>
                  <el-table-column prop="licence" label="车牌号" width="120"></el-table-column>
                  <el-table-column prop="address" label="区域" width="120"></el-table-column>
                  <el-table-column prop="userCreateTime" label="注册时间" :formatter="dateForma" width="200" sortable></el-table-column>
                  <el-table-column prop="userLastLoginTime" label="最近登录时间" :formatter="dateForma" width="200"></el-table-column>
                  <el-table-column prop="enable" label="账号状态" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.enable== 1" class="userStatus1">正常</span>
                      <span v-if="scope.row.enable== 2" class="userStatus2">禁用</span>
                      <span v-if="scope.row.enable== 3" class="userStatus3">已注销</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right"  width="100">
                    <template slot-scope="scope">
                      <el-button @click="goToUserListDetails(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="getName(scope.row)" type="text" size="small">增</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[50,100,150,200,250]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
              <el-dialog title="会员卡" :visible.sync="dialog"  width="480px" class="dialog">
                <el-form ref="card" :model="card" label-width="100px">
                  <el-form-item label="会员信息">
                    <p>{{card.msg}}</p>
                  </el-form-item>
                  <el-form-item label="选择套餐">
                    <el-select v-model="card.select"  @focus="getSelect()"  @change="getSelectDetail()">
                      <el-option v-for="item in listSelect" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="卡售价">
                    <span>{{card.price}}</span>
                    <span class="pricetext">元</span>
                  </el-form-item>
                  <el-form-item label="使用次数"  v-if="card.type==2">
                    <span>{{card.times}}</span>
                    <span class="pricetext">次</span>
                  </el-form-item>
                  <el-form-item label="有效期">
                    <span>{{card.allTime}}</span>
                    <span class="pricetext">天</span>
                  </el-form-item>
                  <el-form-item label="类型">
                    <el-radio-group v-model="card.status">
                      <el-radio :label="2">赠送</el-radio>
                      <el-radio :label="3">补偿</el-radio>
                      <el-radio :label="4">其他</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input v-model="card.remark" placeholder="(必填)"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="dialog = false,onSubmit('card')" class="sure">确 定</el-button>
                    <el-button @click="dialog = false" class="cancel">取 消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
              <el-dialog title="新增会员信息" :visible.sync="dialog1"  width="480px" class="dialog">
                <el-form ref="cardmsg" :model="cardmsg" label-width="100px">
                  <el-form-item label="手机号">
                    <el-input v-model="cardmsg.phoneNumber" placeholder="(必填)"></el-input>
                  </el-form-item>
                  <el-form-item label="车牌号">
                    <el-input v-model="cardmsg.licence" placeholder="(必填)"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="dialog1 = false,onSubmit1('cardmsg')" class="sure">添 加</el-button>
                    <el-button @click="dialog1 = false" class="cancel">取 消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'UserList',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        options: [{//账号状态
          value: '1',
          label: '正常',
        },{
          value: '3',
          label: '已注销',
        },{
          value: '2',
          label: '禁用',
        }],
        value: null,//账号状态
        oldValue:null,//旧的账号状态
        input: null,// 搜索输入框
        time:null,//时间段
        startTime:null,//开始时间
        endTime:null,//结束时间
        tableData: [],// 会员表格
        multipleSelection: [], // 选择后的列表
        card:{//会员卡
          id:'',//会员id
          msg:'',//会员信息
          select:'',//套餐id
          price:'',//卡售价
          times:'',//使用次数
          allTime:'',//有效期
          status:'',//类型
          remark:'',//备注
        },
        listSelect:[],
        dialog: false,// 会员卡弹窗
        dialog1:false,//新增会员信息弹窗
        cardmsg:{
          licence:'',//车牌
          phoneNumber:'',//手机号码
        }
      }
    },
    mounted() {
      this.findUser();
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      // 获取所有会员列表
      findUser(){
        this.$axios.post(this.baseURL+'user/searchUser',{
          "enable":this.value,
          "key": this.input,
          "role":1,
          "page": this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC",
          "startTime":this.startTime,
          "endTime":this.endTime
        }).then((res)=>{
          console.log(res,"所有会员");
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 选择账号状态查找
      selectChanged(){
        console.log("旧的账号状态："+this.oldValue);
        console.log("选择账号状态："+this.value);
        //this.input = "";//修改账号状态时清空输入框
        if(this.oldValue!=this.value){
          this.page=1
        }
        this.findUser();
      },
      //根据时间段查找
      getTime(){
        console.log(this.time)
        if(this.time==null){
          this.startTime = null
          this.endTime = null
        }else{
          this.startTime = this.time[0]
          this.endTime = this.time[1]
        }
        this.findUser();
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 查看表格该列详情
      goToUserListDetails(row) {
        var data = row;
        this.$router.push({
          path: '/UserListDetails',
          query: {
            data: data,
          }
        })
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findUser();
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findUser();
      },
      //开通会员权限
      getName(row){
        console.log(row)
        this.$confirm('确认给会员 '+'<i style="color:red;font-style:normal;">'+row.id+' '+row.wechatNickname+'</i>'+' 开通/续费套餐服务?', '开通/续费提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true
        }).then(() => {//确认
          this.dialog =true
          if(row.wechatNickname){
            this.card.msg = row.id+row.wechatNickname
            this.card.id = row.id
          }else{
            this.card.msg = row.id+row.phoneNumber
          }
        }).catch(() => {//取消

        });
      },
      //获取套餐
      getSelect(){
        this.$axios.post(this.baseURL+'card/getAllCards',{
          "requestSource":"PC",
          'flag':1,//1-上架 2-删除 3-下架
        }).then((res)=>{
          console.log(res,"所有会员卡");
          if(res.data.code==1){
            this.listSelect = res.data.data.records
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //获取套餐详情
      getSelectDetail(){
        console.log(this.card.select)
        let obj = {}
        obj = this.listSelect.find(
            item=>{
              return item.id===this.card.select //筛选出对应数据
            }
        )
        console.log(obj);
        this.card.price = obj.sale
        this.card.type = obj.type
        this.card.times = obj.times
        this.card.allTime = obj.userTime
      },
      //提交
      onSubmit(){
        console.log(this.card)
        this.$axios.post(this.baseURL+'business/adminAddCard',{
          "requestSource":"PC",
          "userId":this.card.id,//会员卡id
          "cardId":this.card.select,//套餐id
          "rechargeType":this.card.status,//购卡类型2-赠送 3-补偿 4-其他
          "remark":this.card.remark,//备注信息
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '开通成功!'
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //新增会员信息
      onSubmit1(){
        console.log(this.cardmsg)
        this.$axios.post(this.baseURL+'user/adminThirdPartyRegister',{
          "requestSource":"PC",
          "licence":this.cardmsg.licence,
          "phoneNumber":this.cardmsg.phoneNumber,
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userStatus1 {
    color: #19be6b;
  }
  .userStatus2 {
    color: #eb194d;
  }
  .userStatus3 {
    color: red;
  }
  .name{
    cursor: pointer;
    color: red;
  }
  .el-icon-star-on{
    color: #fdc100;
  }
  >>> .el-date-editor{
    height: 35px!important;
    line-height: 35px!important;
    margin-top: 7px;
    margin-right: 10px;
  }
  .search1{
    position: absolute;
    right: 30px;
  }
</style>
